View.vue
<template>
  <h1>容器布局组件</h1>

    <div class="common-layout">
      <el-container>
        <el-header>
          <el-menu mode="horizontal" style="background-color:#0aa1ed;">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">导演</el-menu-item>
            <el-menu-item index="3">演员</el-menu-item>
            <el-menu-item index="4">配乐</el-menu-item>
          </el-menu>
        </el-header>
        <el-container>
          <el-aside width="100px">
            <el-menu>
              <el-menu-item index="1">钟楚红</el-menu-item>
              <el-menu-item index="2">张国荣</el-menu-item>
              <el-menu-item index="3">周润发</el-menu-item>
            </el-menu>
          </el-aside>
          <el-container>
            <el-main>
              <h3 style="background-color:#0aa1ed; color:#fff;">智慧车辆管理系统 IVOS</h3>
              <el-table :data="arr">
                <el-table-column label="序号" type="index" align="center" width="60px"></el-table-column>
                <el-table-column label="品牌" prop="brand" align="center"></el-table-column>
                <el-table-column label="型号" prop="model" align="center"></el-table-column>
                <el-table-column label="车牌" prop="license" align="center"></el-table-column>
                <el-table-column label="颜色" prop="color" align="center"></el-table-column>
                <el-table-column label="公里数" prop="km" align="center"></el-table-column>
              </el-table>
            </el-main>
            <el-footer>联系我们</el-footer>
          </el-container>
        </el-container>
      </el-container>
    </div>

</template>

<script setup>
  import {ref} from "vue";

  const arr = ref([
    {brand:'问界',model:'s9',license:'京A888888',color:'gold',km:'88888'},
    {brand:'宾利',model:'慕尚',license:'沪A999999',color:'white',km:'99999'},
    {brand:'迈巴赫',model:'s680',license:'粤A777777',color:'black',km:'77777'},
    {brand:'保时捷',model:'918',license:'川A666666',color:'gold',km:'66666'},
    {brand:'奔驰',model:'s600',license:'湘A555555',color:'black',km:'55555'},
    {brand:'宝马',model:'x9',license:'贵A333333',color:'white',km:'44444'},
    {brand:'奥迪',model:'a8',license:'琼B222222',color:'black',km:'33333'},
  ]);
</script>

<style scoped>

</style>